Tutorial: Cara Membuat Bar Chart di Dashboard untuk Menghitung Data
Posted on 15 August 2024
Dalam artikel ini, kita akan membahas langkah-langkah untuk membuat sebuah bar chart sederhana di dashboard Laravel menggunakan Chart.js untuk menghitung data Mata Kuliah. Tutorial ini bertujuan untuk membantu Anda menampilkan statistik dari data Mata Kuliah yang tersimpan dalam database dengan cara yang visual dan mudah dipahami.
1. Persiapan Data
Pertama-tama, pastikan Anda sudah memiliki data Mata Kuliah yang tersimpan dalam database. Jika belum, Anda bisa mengikuti tutorial CRUD sebelumnya untuk membuat dan mengelola data Mata Kuliah.
2. Install Chart.js
Chart.js adalah library JavaScript yang populer dan mudah digunakan untuk membuat grafik di aplikasi web. Anda dapat menggunakannya dengan Laravel untuk menampilkan grafik seperti bar chart, pie chart, dan lain-lain.
Langkah pertama, Anda perlu menambahkan library Chart.js ke dalam proyek Laravel Anda. Jika Anda menggunakan npm atau yarn, jalankan perintah berikut di terminal:
npm install chart.js --save
Atau Anda bisa menambahkan Chart.js secara langsung melalui CDN dengan menambahkan skrip berikut ke dalam template Blade di bagian <head> atau sebelum tag penutup </body>:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Contoh:
Code tersebut berada di sebelum tag penutup </body>
3. Membuat Controller untuk Menyediakan Data
Selanjutnya, kita perlu membuat controller untuk menyediakan data yang akan ditampilkan dalam grafik. Misalnya, kita ingin menghitung jumlah Mata Kuliah berdasarkan kategori tertentu.
Tambahkan metode berikut ke dalam controller yang sesuai (misalnya DashboardController):
public function chartData() { // Menghitung jumlah total Mata Kuliah $totalCourses = Matakuliah::count(); return response()->json([ 'totalCourses' => $totalCourses ]); }
Metode ini akan mengembalikan data dalam format JSON yang dapat digunakan oleh Chart.js.
4. Membuat View untuk Dashboard
Sekarang, buat file view baru di dalam folder resources/views/dashboard bernama index.blade.php dan tambahkan kode berikut:
@extends('layouts.app') @section('content') <div class="container"> <h1>Dashboard Mata Kuliah</h1> <canvas id="courseChart" width="400" height="200"></canvas> </div> <script> document.addEventListener('DOMContentLoaded', function () { // Ambil data dari controller via AJAX fetch('{{ route("chart.data") }}') .then(response => response.json()) .then(data => { var ctx = document.getElementById('courseChart').getContext('2d'); var courseChart = new Chart(ctx, { type: 'bar', data: { labels: ['Jumlah Mata Kuliah'], datasets: [{ label: 'Jumlah Total', data: [data.totalCourses], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); }); }); </script> @endsection
Pada kode di atas, kita menyiapkan elemen <canvas> yang akan digunakan oleh Chart.js untuk menampilkan bar chart. Grafik ini akan otomatis diisi dengan data yang diambil melalui fetch dari route chart.data.
5. Menambahkan Route
Agar data dapat diambil oleh view, kita perlu menambahkan route yang mengarahkan ke metode chartData() di controller. Tambahkan route berikut ke file routes/web.php:
Route::get('/chart-data', [DashboardController::class, 'chartData'])->name('chart.data');
6. Menjalankan Aplikasi
Sekarang, jalankan aplikasi Anda dan buka halaman dashboard http://127.0.0.1:8000/dashboard. Anda akan melihat bar chart yang menampilkan jumlah Mata Kuliah berdasarkan Jumlah.
Kesimpulan
Dengan tutorial ini, Anda telah berhasil membuat bar chart sederhana di dashboard Laravel untuk menampilkan statistik data Mata Kuliah menggunakan Chart.js. Anda dapat memperluas fungsionalitas ini dengan berbagai jenis grafik lainnya, serta menambahkan fitur interaktif lainnya sesuai kebutuhan aplikasi Anda. Teruslah eksplorasi berbagai fitur Chart.js dan Laravel untuk meningkatkan kualitas aplikasi Anda.
Semoga artikel ini bermanfaat bagi Anda!
Baca juga:
Tutorial: Membuat Tampilan (View) untuk CRUD di Laravel